<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="文件名称">
                <!-- <el-select
                  v-model="form.fileName"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
                <el-input v-model.trim="form.fileName" clearable placeholder="请输入，支持模糊搜索" />
            </el-form-item>
            <el-form-item label="报告年份">
                <el-date-picker v-model="form.reportYear" type="year" format="yyyy" value-format="yyyy" :clearable="true" placeholder="请选择">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c59_d258_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c59_d258_2' }" type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c59_d261_2' }" @click="handleAdd">上传报告</BaseButton>
            <BaseButton v-permission="{ btnCode: 'dlyh_c59_d260_2' }" style="margin-right: 8px" :disabled="selectionList.length === 0" type="second" @click="handleDelete">
                删除
            </BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable
            slot="table"
            v-loading="listLoading"
            :columns="columns"
            :data="list"
            row-key="id"
            height="calc(100% - 73px)"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <template #uploadFileName="{ scope: { row } }">
                <span class="link" @click="handleDownload(row)">{{ row.uploadFileName }}</span>
            </template>
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c59_d259_2' }" type="text" @click="handleEdit(row.id)">修改</BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />
        <SaveOrUpdate ref="dialog" @success="handleFilter"></SaveOrUpdate>
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import reconfirm from '@/utils/reconfirm'
import { DecisionReportModel } from '@/models'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import SaveOrUpdate from './SaveOrUpdate'

export default {
    name: 'DecisionReport',
    components: {
        BasePage,
        SaveOrUpdate
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                fileName: '',
                reportYear: ''
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            options: [],
            loading: false,
            downloadLoading: false,
            templateLoading: false,
            model: new DecisionReportModel(),
            form: {
                fileName: '',
                reportYear: ''
            },
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        width: '60'
                    }
                },
                {
                    attrs: {
                        prop: 'fileName',
                        label: '文件名称',
                        'min-width': '150',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'orgName',
                        label: '所属单位',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'reportYear',
                        label: '报告年份',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'uploadTime',
                        label: '上传时间',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    slot: 'uploadFileName',
                    attrs: {
                        prop: 'uploadFileName',
                        label: '文件',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '150',
                        fixed: 'right'
                    }
                }
            ]),
            selectionList: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // remoteMethod(query) {
        //     if (query !== '') {
        //         this.loading = true
        //         this.model
        //             .getList({fileName: query}, {pageNo: 1, pageSize: 1000})
        //             .then((res) => {
        //                 this.options = res.list.map(item => {
        //                     return {
        //                         value: item.fileName,
        //                         label: item.fileName
        //                     }
        //                 })
        //             })
        //             .finally(() => {
        //                 this.loading = false
        //             })
        //     } else {
        //         this.options = []
        //     }
        // },
        getList() {
            this.listLoading = true
            this.model
                .getList({...this.form}, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                    this.options = res.list.map(item => {
                        return {
                            value: item.fileName,
                            label: item.fileName
                        }
                    })
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleAdd() {
            this.$refs['dialog'].open({ type: 'add' })
        },
        handleEdit(id) {
            this.$refs['dialog'].open({ id, type: 'edit' })
        },
        handleDelete() {
            reconfirm({
                text: '是否删除当前数据',
                callback: () => {
                    const ids = this.selectionList.map((item) => item.id)
                    return this.model.delete({ ids }).then(() => {
                        this.getList(true)
                        this.$message.success('删除成功!')
                    })
                }
            })
        },
        handleSelectionChange(value) {
            this.selectionList = value
        },
        handleDownload(data) {
            const x = new window.XMLHttpRequest()
            x.open('GET', data.fileUrl, true)
            x.responseType = 'blob'
            x.onload = () => {
                const url = window.URL.createObjectURL(x.response)
                const a = document.createElement('a')
                a.href = url
                a.download = data.uploadFileName
                a.click()
            }
            x.send()
        }
    }
}
</script>

<style lang="scss" scoped>
.link {
    color: #0162FF;
    cursor: pointer;
}
</style>
